<template>
	<view class="container">
		<view class="box">
			<view class="title">退款进度</view>
			<view>
				<view class="colflex process" v-for="item in process" :key="item.id">
					<view :class="item.color">
						■
					</view>
					<view class="rowflex bet">
						<text>{{item.title}}</text>
						<text class="time">{{item.time}}</text>
					</view>
					<text class="content">{{item.content}}</text>
				</view>
			</view>
		</view>

		<view class="box">
			<scroll-view scroll-y>
				<view class="message" v-for="item in service" :key="item.id">
					<view class="pic">
						<image src="../../../../static/zhang/doctor.png" mode="widthFix"></image>
					</view>
					<view class="service">
						<text>{{item.service}}</text>
						<text>{{"￥" + item.price}}</text>
					</view>
				</view>
			</scroll-view>

			<view class="count">
				<text>小计</text>
				<text>{{"￥" + count}}</text>
			</view>

			<view class="info">
				<view class="infoItem">
					<text>退款金额</text>
					<text>￥{{count}}</text>
				</view>

				<view class="infoItem">
					<text>退款原因</text>
					<text>陪护员有事</text>
				</view>

			</view>
		</view>

	</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 0,
				process: [{
						id: 1,
						title: "等待平台处理",
						content: "",
						time: "12-30 11:44:21",
						color:"cube"
					},
					{
						id: 2,
						title: "平台拒绝退款",
						content: "他没事",
						time: "12-30 11:44:21",
						color:"cubeC"
					}
				],
				service: [{
						id: 1,
						service: "助医服务",
						price: 38,
					},
					{
						id: 2,
						service: "陪护服务",
						price: 15,
					},
					{
						id: 3,
						service: "助医服务",
						price: 38,
					},
				],
			}
		},
		methods: {
			countPrice() {
				let r = 0;
				this.service.forEach(item => {
					r = r + item.price
				})
				this.count = r;
			},
		},
		onReady() {
			this.countPrice();
		}
	}
</script>

<style scoped>
	.rowflex {
		display: flex;
		flex-flow: row nowrap;
		align-items: center
	}

	.colflex {
		display: flex;
		flex-flow: column nowrap;
	}

	.bet {
		position: relative;
		justify-content: space-between;
	}

	.container {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		padding: 20rpx;
	}

	.box {
		border-radius: 10rpx;
		box-shadow: 0 2rpx 3rpx 5rpx rgba(0, 0, 0, 0.1);
		;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.process {
		height: 100rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		position: relative;
	}

	.cube {
		position: absolute;
		left: -30rpx;
		color: #A6A6A6;
	}

	.cubeC {
		position: absolute;
		left: -30rpx;
		color: #007AFF;
	}

	.title {
		font-size: 1.1rem;
	}

	.content {
		font-size: 0.8rem;
	}

	.time {
		font-size: 0.8rem;
		color: #b8b8b8;
	}

	scroll-view {
		height: 300rpx;
	}

	.message {
		display: flex;
		flex-flow: row nowrap;
		padding: 10rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		margin-bottom: 10rpx;
	}

	.pic {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #007AFF;
		margin-right: 20rpx;
	}

	image {
		width: 50rpx;
	}

	.service {
		flex-grow: 2;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}


	.service text:first-child {
		font-size: 0.8rem;
	}

	.service text:last-child {
		font-size: 1.2rem;
		color: rgb(255, 126, 35);
		font-weight: bold;
	}

	.count {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		font-size: 0.9rem;
	}

	.count text:last-child {
		font-weight: bold;
		color: red;
		margin-left: 15rpx;
	}

	.infoItem {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		font-size: 0.8rem;
		margin-top: 20rpx;
	}
</style>
